<template>
	<view class="nav_bar_wrap" :style="{
			backgroundColor: bgColor,
			paddingTop: statusBarHeight+'px',
			borderColor: isBorder?'#DBE0E6': 'transparent'
		}">
		<view class="nav_bar flexV_sb">
			<view class="title_wrap">
				<text v-if="title" class="title" :style="{
						color: color,
					}">{{title}}</text>
				<slot v-else></slot>
			</view>
			<view class="left_wrap flexV">
				<template v-if="isBack">
					<view class="back_wrap flexV" @click="back">
						<image class="icon" src="/static/common/back_icon.png" mode="aspectFill"></image>
						<text class="back_title" :style="{
								color: color,
							}">{{backTitle}}</text>
					</view>
				</template>

				<view class="home_btn flexV" @click="goHomeFun" v-if="goHome">
					<text class="icon-home iconfont" :style="{
							color: color,
						}"></text>
				</view>
				
				<slot name='left'></slot>
			</view>
			<view class="right_wrap">
				<slot name='right'></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: '#fff',
			},
			color: {
				type: String,
				default: '#333',
			},
			title: {
				type: String,
				default: '',
			},
			backTitle: {
				type: String,
				default: '',
			},
			goHome: {
				type: Boolean,
				default: false
			},
			isBack: {
				type: Boolean,
				default: true
			},
			isBorder:{
				type: Boolean,
				default: true
			}
			
		},
		data() {
			return {
				statusBarHeight: 0
			}
		},
		mounted() {
			// #ifdef H5
			this.statusBarHeight = 0
			// #endif
			// #ifndef H5
			let {
				statusBarHeight
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			// #endif
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav_bar_wrap {
		border-bottom: 1px solid #DBE0E6;

		.nav_bar {
			height: 88rpx;
			position: relative;
			padding: 0 26rpx;

			.title_wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.back_wrap {
				padding: 0 6rpx;

				.icon {
					width: 44rpx;
					height: 44rpx;
				}

				.back_title {
					font-size: 30rpx;
					font-weight: 500;
				}
			}

			.home_btn {
				padding: 0 6rpx;
				margin-left: 6rpx;

				.icon-home {
					font-size: 32rpx;
				}
			}
		}
	}
</style>